<template>
  <el-form-item v-show="isShow" :label="i18nt('designer.setting.fontSize')">
    <el-slider v-model="localFontSize" size="small" :min="min" :max="max" :step="1" />
  </el-form-item>
</template>

<script>

export default {
  name: 'FontSizeEditor',
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },
  data() {
    return {
      localFontSize: 0, //div中
      min: 2,
      max: 30,
      loadCount: 0
    }
  },
  mounted() {
    this.initLocalFontSize(); // 初始化时绑定当前控件的字体大小
  },
  computed: {
    isShow() {
      // 当组件为 button , 并且 isTitle 为 0 时，不显示
      if (
        this.selectedWidget &&
        this.selectedWidget.type === 'button' &&
        this.selectedWidget.options.isTitle === 0
      ) {
        return false
      }

      return true
    }
  },
  watch: {
    // 监听 selectedWidget 变化，切换控件时重新初始化 localFontSize
    selectedWidget: {
      immediate: true,
      handler() {
        this.initLocalFontSize();
      }
    },
    localFontSize: {
      deep: true,
      handler(val) {
        if (val && this.loadCount > 1) {
          this.optionModel.fontSize = Math.round((val+5)*2);
          console.log('fontSize',  this.optionModel.fontSize)
          console.log('localFontSize', this.localFontSize)
        }
        else {
          this.localFontSize = (Math.round(this.optionModel.fontSize / 2) - 5)
        }
        this.loadCount ++
      }
    }
  },
  methods: {
    // 初始化 localFontSize 的方法
    initLocalFontSize() {
      if (this.optionModel.fontSize) {
        this.localFontSize = Math.round(this.optionModel.fontSize / 2) - 5;
      } else {
        this.localFontSize = 0; // 默认值
      }
      this.loadCount = 0; // 重置计数器
    }
  }
}
</script>

<style scoped></style>
